<template>
    <label :class="['uap-switch', {'uat-switch-disabled':disabled}]">
      <div v-if="inactiveText" :class="['uap-switch-label','uap-switch-left',!currentValue ? 'is-active' : '']">{{inactiveText}}</div>
        <input class="uap-switch-input"
            :disabled="disabled"
            @change="$emit('change', currentValue)"
            type="checkbox"
            v-model="currentValue">
        <div class="uap-switch-core" :style="{ 'width': width + 'px' }" ref="core"></div>
        <div v-if="activeText" :class="['uap-switch-label','uap-switch-right', currentValue ? 'is-active' : '']">{{activeText}}</div>
    </label>
</template>
<script>
/**                   类型                      默认值
 * value          [Boolean, String, Number]开关选中状态       false
 * activeColor      [string] 打开时的背景色      #EF554A
 * inactiveColor    [string] 关闭时的背景色      #fdfdfd
 * disabled         [boolean] 是否为禁用状态    false
 * width            [number]  switch 的宽度     52
 * activeValue      [Boolean, String, Number]打开时对应的值   true
 * inactiveValue    [Boolean, String, Number]关闭时对应的值   false
 * activeText       [string] 打开时的文字描述
 * inactiveText     [string] 关闭时的文字描述
 */
export default {
    name: 'UapSwitch',
    props: {
        value: {
            type: [Boolean, String, Number],
            default: false
        },
        activeValue: {
            type: [Boolean, String, Number],
            default: true
        },
        inactiveValue: {
            type: [Boolean, String, Number],
            default: false
        },
        activeText: {
            type: String,
            default: ''
        },
        inactiveText: {
            type: String,
            default: ''
        },
        activeColor: {
            type: String,
            default: ''
        },
        inactiveColor: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        width: {
            type: Number,
            default: 52
        },
    },
    computed: {
        currentValue: {
            get(){
                return this.value === this.activeValue;
            },
            set(val){
                // console.log(val)
                let newVal = val ? this.activeValue : this.inactiveValue;
                this.$emit('input',newVal ? newVal : val);
            }
        }
    },
    watch: {
        currentValue(params) {
            if (this.activeColor || this.inactiveColor) {
                this.setBackgroundColor(params);
            }
        },
    },
    methods: {
        setBackgroundColor(params) {
            let newColor = params ? this.activeColor : this.inactiveColor;
            if (newColor) {
                this.$refs.core.style.borderColor = newColor;
                this.$refs.core.style.backgroundColor = newColor;
            }
        }
    },
    mounted() {
        if (this.activeColor || this.inactiveColor) {
            this.setBackgroundColor(this.currentValue);
        }
    },
}
</script>

<style  scoped>
.uap-switch {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.uat-switch-disabled {
  cursor: not-allowed;
}
.uap-switch-input {
  display: none;
}
.uap-switch * {
    pointer-events: none;
}
.uap-switch-label {
    font-size: 14px;
    font-weight: 500;
    color: #303133;
}
.uap-switch-right{
  margin-left: 10px;
}
.uap-switch-left{
  margin-right: 10px;
}
.is-active{
  color: #EF554A;
}
.uap-switch-label:empty {
    margin-left: 0;
}
.uap-switch-core {
  position: relative;
  width: 52px;
  height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 16px;
  box-sizing: border-box;
  /* background-color: #d9d9d9; */
  background-color: #fdfdfd;
}
.uap-switch-core::after, .uap-switch-core::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  transition: all .3s;
  border-radius: 15px;
}
.uap-switch-core::after {
  width: 30px;
  height: 30px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.uap-switch-core::before {
  width: 50px;
  height: 30px;
}
.uap-switch-input:checked + .uap-switch-core {
  border-color: #EF554A;
  background-color: #EF554A;
}
.uap-switch-input:checked + .uap-switch-core::before {
  transform: scale(0);
}
.uap-switch-input:checked + .uap-switch-core::after {
  left: 100%;
  margin-left: -31px;
}
/* transform: translateX(90%); */
</style>
